<template>
    <transition name="slider">
        <div class="publishcomment">
            <m-header :canreturn=true :type="1" :titleText=titleText :publish="publish" @publish="publishComment"></m-header>
            <div class="content">
                <textarea name="commentcontent" cols="30" rows="10" placeholder="请发表对游戏本身的看法，心得攻略，成就感想" class="commentcontent" ref="content"></textarea>
            </div>
        </div>
    </transition>
</template>

<script type="text/ecmascript-6">
import MHeader from 'components/m-header/m-header';
import { mapGetters, mapMutations } from 'vuex';
import { postInfo } from '@/base/api/indexpage/getindexinfo';

export default {
    data() {
        return {
            titleText: '',
            publish: true,
            gameid: 0,
        };
    },
    created() {
        this.gameid = this.$route.query.gameid;
    },
    methods: {
        publishComment() {
            console.log('发表评论');
            console.log(this.$refs.content.value);
            const commentAddress = '/game/comments/add';
            if (this.$refs.content.value.length < 10) {
                plus.nativeUI.toast('评论内容不能少于10个汉字!');
                return;
            }
            postInfo(commentAddress, {
                content: this.$refs.content.value,
                id: this.gameid,
                token: this.getToken,
            }).then((res) => {
                let backNum = this.back + 1;
                if (res.status_code === 200) {
                    plus.nativeUI.toast('评论发表成功');
                    this.$router.back(-1);
                    this.setBack(backNum);
                } else {
                    plus.nativeUI.toast(res.message);
                }
            });
        },
        ...mapMutations([
            'setBack',
        ]),
    },
    computed: {
        ...mapGetters(['getToken', 'back']),
    },
    components: {
        MHeader,
    },
};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~common/stylus/variable';
@import '~common/stylus/mixin';

slider();

.publishcomment {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 100%;
    background: $color-background;
    background: #f2f2f2;

    .content {
        width: 100%;
        height: 100%;

        .commentcontent {
            box-sizing: border-box;
            padding: 15px;
            outline: none;
            height: 100%;
            width: 100%;
            border: none;
            font-family: 'PingFang SC', 'STHeitiSC-Light', 'Helvetica-Light', arial, sans-serif, 'Droid Sans Fallback';
            font-size: $font-size-small;
            line-height: 18px;

            &:focus {
                border: none;
                outline-offset: 0;
            }
        }
    }
}
</style>
